<template>
  <section class="section">
    <div class="frame-left-category" @click="show = !show">
      <p class="category-title">{{title}}</p>
      <p class="category-value"><input readonly="readonly" @input="input" :value="val" class="input"/> ▾</p>
    </div>
    <div class="wrap" v-show="show">
      <div class="frame-left-category line select-item" v-for="(item, index) in options" :key="index" @click="select(item, index)">
        <p class="category-title">{{item.label}}</p>
        <p class="category-value">
          <yd-icon name="checkoff" size="16px" color="#16AA6B"  v-if="active == index"></yd-icon>
        </p>
      </div>
    </div>
  </section>
</template>

<script>
  export default {
    name: 'm-select',
    data () {
      return {
        show: false,
//        active: 0
      }
    },

    components: {},

    computed: {
      val () {
        for (let i in this.options) {
          if (this.options[i].value === this.value &&  this.value != '0') {
            return this.options[i].label
          }
        }
        return '全部'
      },
      active : {
          get: function (){
//            var allExist = 0
//            for (let i in this.options) {
//              if (this.options[i].label === '全部') {
//                allExist = 1
//              }
//            }
            var temp = -1
            for (let i in this.options) {
              if (this.options[i].value === this.value) {
                temp = i
              }
            }
//            console.log(temp + '当前选中-----------')
//            console.log(allExist + "有无厂家")
            return temp
          },
          set: function () {

          }
//          try{
//            var allExist = 1
//            for (let i in this.options) {
//              if (this.options[i].label === '全部') {
//                allExist = 0
//              }
//            }
//            return this.value - allExist
//          }catch (e){
//
//          }

      }
    },

    mounted () {

    },

    props: {
      title: '',
      value: '',
      options: {
        type: [Array],
        default () {
          return []
        }
      }
    },

    methods: {
      input (e) {

      },
      select (item, index) {
        this.$emit('input', item.value)
        this.$emit('change', item)
        this.show = false
        this.active = index
      }
    }
  }
</script>
<style scoped>
  .input{
    border: none;
    text-align: right;
    cursor: pointer;
  }

  .line{
    border-color: #f3f1f1!important;
    border-bottom: 1px solid #f3f1f1;
  }

  .line:nth-of-type(1){
     border-top: 1px solid #f3f1f1;
  }

  .frame-left-category{
    padding:5px;
    width: 100%;
    height: 50px;
    background-color: white;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    justify-content: space-between;
    border-width: 1px;
    border-color: #C8C8C8;
    box-sizing: border-box;
  }

  .select-item{
    float: right;
  }

  .category-title{
    margin-left: 10px;
    font-size: 14px;
    color: #303641;
  }
  .category-value{
    margin-right: 20px;
    font-size: 14px;
    /*width: 100%;*/
  }

  .section{
    position: relative;
    width: 80%;
    height: 50px;
    cursor: pointer;
  }

  .wrap{
    position: absolute;
    z-index: 100;
    width: 100%;
    top: 50px;
  }
</style>
